<template>
  <!-- 课程分类 -->
  <CourseCategory :courseCategoryList=courseCategoryList />
  <!-- 列表筛选 -->
  <CourseContent :ucfilter="ucfilter">
    <!-- 具名插槽，插入视频展示内容 -->
    <template #videoShow>
      <div class="video" name="videoShow">
        <div v-for="item in VideoContenInfo.content" :key="item.createTime" class="item">
          <!-- 视频封面 -->
          <img :src="item.cover[0]" alt="" class="img">
          <!-- 播放按钮 -->
          <img class="playButton" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png" />
          <!-- 视频标签 -->
          <div class="videoTag">{{ item.subjectTag ? item.subjectTag : "视频课" }}</div>
          <!-- 视频详情信息 -->
          <div class="videoBottom">
            <p class="title">
              {{ item.title }}
            </p>
            <div class="buy">
              <!-- 价格 -->
              <div class="price">￥{{
                  parseFloat(item.commodityBackup.price).toFixed(2)
                }}
              </div>
              <!-- 浏览量 -->
              <div class="places">{{ item.statisticsBackup.viewCount }}人浏览</div>
            </div>
            <!-- 会员免费 -->
            <div :style="item.moreBackup.platformVipPlan?{background: `url(https://rs.dance365.com/vip_free@3x.png) no-repeat`,
               backgroundSize: '40px'}:''"
                 class="memberTag">
            </div>
            <div class="options">
              <div class="opItem">
                <el-icon :size=16>
                  <Pointer />
                </el-icon>
                {{ item.statisticsBackup.praiseCount }}
              </div>
              <div class="opItem">
                <el-icon :size=16>
                  <ChatDotSquare />
                </el-icon>
                {{ item.statisticsBackup.commentCount }}
              </div>
              <div class="opItem">
                <el-icon :size=16>
                  <Star />
                </el-icon>
                {{ item.statisticsBackup.favoriteCount }}
              </div>
            </div>
            <!-- 分割线 -->
            <div class="cutoffRule"></div>
            <div class="bottomInfo">
              <div class="user">
                <img :src="item.creatorBackup.avatar" alt=""
                     class="avatar">
                <div class="name">{{ item.creatorBackup.name }}</div>
              </div>
              <!-- 时间 -->
              <div class="time">{{
                  (new Date(item.updateTime).getFullYear() !== new Date().getFullYear() ? new Date(item.updateTime).getFullYear() + "-" : '')
                  + (new Date(item.updateTime).getMonth() < 9 ? "0" + (new Date(item.updateTime).getMonth() + 1) : new Date(item.updateTime).getMonth() + 1)
                  + "-" + (new Date(item.updateTime).getDate() < 10 ? "0" + new Date(item.updateTime).getDate() : new Date(item.updateTime).getDate())
                }}
              </div>
            </div>
          </div>
        </div>

      </div>
    </template>
  </CourseContent>
</template>

<script lang="ts">
  import {defineComponent} from "vue";

  export default defineComponent({
    name: "VideoCourse"
  });
</script>

<script lang="ts" setup>
  import {onMounted, ref} from "vue";
  import {
    requestCourseCategory,
    courseCategoryType,
    requestVideoContent,
    ResVideoContentType
  } from "@/api/courseAPI/videoCourseAPI";
  import CourseCategory from "../component/courseCategory";
  import CourseContent from "../component/courseContent";
  import {Pointer, ChatDotSquare, Star} from '@element-plus/icons-vue';

  onMounted(() => {
    console.log("视频课挂载");
    getCourseCategory();
    getVideoContent();
  });

  const courseCategoryList = ref<courseCategoryType[]>([]);
  //获取课程分类数据
  const getCourseCategory = async () => {
    const result = await requestCourseCategory("video_course");
    courseCategoryList.value = result;
  };

  const VideoContenInfo = ref<ResVideoContentType>({});
  const page = ref({
    pageSize: 20,
    pageNum: 0
  });
  //获取视频内容数据
  const getVideoContent = async () => {
    const result = await requestVideoContent("video_course", page.value.pageSize, page.value.pageNum);
    console.log(result);
    VideoContenInfo.value = result;
  };

  const ucfilter = ref([
    {
      id: 1,
      title: "综合排序",
      name: "integrated"
    }, {
      id: 2,
      title: "销量",
      name: "sellCountDesc"
    }, {
      id: 3,
      title: "评价",
      name: "favorableValueDesc"
    }, {
      id: 4,
      title: "浏览量",
      name: "viewCountDesc"
    }, {
      id: 5,
      title: "价格",
      name: "price"
    }, {
      id: 6,
      title: "发布时间",
      name: "onsellTimeDesc"
    }]);

</script>

<style lang="less">
  // 视频展示
  .video {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 220px;
      background: #fff;
      margin-bottom: 10px;
      position: relative;


      //视频封面
      .img {
        width: 100%;
        height: 120px;
        background: #fff;
        border-radius: 5px 5px 0 0;
      }

      //播放按钮
      .playButton {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 85px;
        left: 10px;
      }

      //视频标签
      .videoTag {
        background-color: rgba(43, 43, 43, 0.55);
        display: inline-block;
        border-radius: 20px;
        color: #fff;
        padding: 5px 8px;
        font-size: 12px;
        position: absolute;
        top: 85px;
        right: 10px;
      }

      .videoBottom {
        padding: 10px 10px 0;
        width: 90%;
        font-size: 12px;
        font-weight: 400;


        .title {
          height: 40px;
          font-size: 14px;
        }

        .buy {
          display: flex;
          justify-content: space-between;
          //价格
          .price {
            font-size: 16px;
            color: #f93684;
          }

          //浏览量
          .places {
            color: #b1b5c1;
          }
        }

        //会员免费标签
        .memberTag {
          width: 40px;
          height: 14px;
          box-sizing: border-box;
        }

        //点赞、评论、收藏
        .options {
          display: flex;
          margin-bottom: 5px;

          .opItem {
            display: flex;
            align-items: center;
            margin-right: 20px;
            color: #a3a4a9;

            .el-icon {
              margin-right: 3px;
            }
          }
        }

        //分割线
        .cutoffRule {
          height: 1px;
          background-color: #ebeced;
          position: relative;
          left: -10px;
          width: 220px;
        }

        .bottomInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px;
          margin: 5px 0;

          .user {
            display: flex;
            align-items: center;

            .avatar {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              margin-right: 8px;
            }

            .name {
              width: 80px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .time {
            color: #b1b5c1;
            float: right;
          }
        }


      }
    }
  }
</style>